<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        select {
            width: 400px;
            height: 400px;
        }
    </style>
</head>
<body>
    <select id="sel1" multiple>
        <option value="">1</option>
        <option value="">2</option>
        <option value="">3</option>
        <option value="">4</option>
        <option value="">5</option>
        <option value="">6</option>
        <option value="">7</option>
    </select>
    <button id="btn1">></button>
    <button id="btn2">&lt;</button>
    <button id="btn3">>></button>
    <button id="btn4">&lt;&lt;</button>
    <select id="sel2" multiple>
    </select>
</body>
<script>
    //获取元素
    var sel1 = document.querySelector('#sel1');
    var sel2 = document.querySelector('#sel2');
    var btn1 = document.querySelector('#btn1');
    var btn2 = document.querySelector('#btn2');
    var btn3 = document.querySelector('#btn3');
    var btn4 = document.querySelector('#btn4');

    //注册事件
    //点击btn3将,左侧所有选项挪到右侧
    btn3.onclick = function(){
        for(var i = 0; i < sel1.children.length; i++){
            sel2.appendChild(sel1.children[i]);
            i--;
        }
    }
    //点击btn4,将右侧所有选项挪到左侧
    btn4.onclick = function(){
        for(var i = 0; i < sel2.children.length; i++){
            sel1.appendChild(sel2.children[i]);
            i--;
        }
    }
    //点击btn1,将左侧选中的挪到右侧
    btn1.addEventListener('click',function(){
        for(var i = 0; i < sel1.children.length; i++) {
            if(sel1.children[i].selected){
                sel2.appendChild(sel1.children[i])
                i--;
            }
        }
    },false);

    //点击btn2,将右侧选中的移到左侧
    btn2.onclick = function(){
        for(var i = 0; i < sel2.children.length; i++) {
            if(sel2.children[i].selected){
                sel1.appendChild(sel2.children[i])
                i--;
            }
        }
    }
</script>
<script src='../jquery-1.12.4.js'></script>
<script>
    // $(function(){
    //     //点击btn3将左边所有选项挪到右边
    //     $('#btn3').on('click',function(){
    //         $('#sel1 option').appendTo($('#sel2'));
    //     })
    //     //点击btn4将右边1的挪到左边
    //     $('#btn4').on('click',function(){
    //         $('#sel2').children().appendTo($('#sel1'));
    //     })
    //     //点击btn1将左边选中的挪到右边
    //     $('#btn1').on('click',function(){
    //         $('#sel1 option:selected').appendTo($('#sel2'))
    //     })
    //     //点击btn2将右边选中的挪到左边
    //     $('#btn2').on('click',function(){
    //         $('#sel2 option:selected').appendTo($('#sel1'));
    //     })
    // })
</script>
</html>